<template>
	<view>
		
			<view class="typeView">
				<u-tabs bold :current="tabsIndex" @click="tabClick" style="background-color: #FFFFFF00;" :list="tabsList"
					lineWidth="32" :lineColor="baseColor" :activeStyle="{
											color: baseColor,
											
											transform: 'scale(1)',
											fontWeight:'bold'
											
										}" :inactiveStyle="{
											color: '#797979',
											transform: 'scale(1)'
										}" itemStyle="  height: 44px;width:20%">
				</u-tabs>
			</view>
			<view v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="flex-row-space-between">
						<view class="itemTitle">
							{{item.shopName}}
						</view>
						<view class="baseColor">
							<text>{{status[item.orderStatus]}}</text>
						</view>
					</view>
					
					
					<view class="itemTitle">
						{{item.customerName}}
					</view>
				</view>
			</view>

		
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		t_order_stageList,
		t_orderList
	} from '@/api/index.js'
	export default {
		components: {},
		
	
		data() {
			return {
				status:{
					'1':'待开始',
					'2':'待开始',
					'3':'进行中',
					'5':'已完成',
					'6':'已完成',
					'7':'已结算',
					'10':'冻结',
					'20':'失效',
				},
				tabsIndex:0,
				baseColor:'#ED6F1A',
				tabsList: [{
						name: '全部',
						status: []
					},
					{
						name: '待开始',
						status:[1,2]
					},
				
					{
						name: '进行中',
						status: [3]
					},
					{
						name: '已完成',
						status:[5,6]
					},
					{
						name: '已结算',
						status:[7] 
					},
					
				],
				list: [],
				title: "供应商版",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'role'
			]),
		
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
		
				this.t_orderList()
		
		},
		onLoad(e) {
			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			tabClick(e){
				this.tabsIndex=e.index
				this.t_orderList()
			},
			t_orderList(){
				var data = {
					selectUserRoleKey:'store_manager',
					customerId:uni.getStorageSync('userinfo').userId,	
					orderStatusList:this.tabsList[this.tabsIndex].status
				}
				t_orderList(data).then(res => {
					this.list = res.rows
				})
			},
			loadData() {

				var data = {
					id: this.id
				}
				forum_list(data).then(res => {
					this.list = res.data.data
				})
			},


		}
	}
</script>

<style lang="scss">
	.title {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #071228;
	}

	.right {
		font-weight: 400;
		font-size: 24rpx;
		color: #ED6F1A;
	}

	.workView {
		padding: 37rpx 0;
		width: 298rpx;
		// height: 155rpx;
		background: linear-gradient(-84deg, #F7701F 1%, #FACF5B 100%);
		box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(247, 115, 33, 0.52);
		border-radius: 16rpx;
	}

	.workView1 {
		background: linear-gradient(-84deg, #E12D47 1%, #FA717F 98%);
		box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(247, 115, 33, 0.52);
	}

	.title1 {
		margin: 0 28rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.title2 {
		margin: 0 28rpx;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.workView2 {
		padding: 38rpx 25rpx;
		margin: 30rpx 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 15rpx;
	}
	.yuan{
		margin-right: 20rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		border: 6px solid #ED6F1A;
	}
	.title3{
		font-weight: 400;
		font-size: 26rpx;
		color: #2F2F2F;
	}
	.time{
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #737373;
	}
	
	
	
	.item{
		padding: 25rpx;
		margin: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(0,0,0,0.03);
		border-radius: 10rpx;
	}
	.itemTitle{
		font-weight: 400;
		font-size: 30rpx;
		color: #707070;
	}
</style>